<template>
    <div class="patientList-view">

      <modules-title :titleName="title"></modules-title>

      <div class="content-view">

        <screen-view :type="type" v-model="screenData" @screen-data="screenClick" @more-click="moreClick"></screen-view>

        <div class="tabView" :class="isMore?'shortTab':''">

          <el-table
            :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                        'text-align':'center'
                    }"
            :cell-style="{'text-align':'center'}"
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              label="姓名"
              width="150">
              <template slot-scope="scope">
                <a class="name" @click="patientClick(scope.row)">{{scope.row.real_name}}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="sex"
              label="性别"
              width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.gender == 0">男</span>
                <span v-else>女</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="age"
              label="年龄"
              width="80">
              <template slot-scope="scope">
                <span>{{scope.row.age | dealAge}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="联系方式"
              width="120">
            </el-table-column>
            <el-table-column
              prop="tel"
              label="紧急联系"
              width="120">
            </el-table-column>
            <el-table-column
              prop="doctor_name"
              label="医生"
              width="150">
            </el-table-column>
            <el-table-column
              prop="result"
              label="最近诊断"
              min-width="300">
            </el-table-column>
            <el-table-column
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="addClick(scope.row.ID)">新建病例</el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>

        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[3, 5, 7, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

      </div>

    </div>
</template>

<script>
  import screenView from "../modules/screenView";
  import {resumeList} from "../../../api/patient";

    export default {
        name: "index",
        components: {screenView},
        data:function () {
            return{
                title:"今天",
                type:0,
                tableData: [],

                pageSize:10,
                pageNum:1,
                loading:false,
                end:false,
                total:0,

                user:{},

                screenData:{
                    search:'',
                    docValue:0,
                    departmentValue:0
                },
                isMore:false
            }
        },
        mounted:function() {
            this.user = this.$store.getters.userInfo

            if (this.$route.query.type){
                this.type = Number(this.$route.query.type)
            }

            switch (this.type) {
                case 0:
                    this.title = "今天";
                    this.screenData.startDate = this.dealDate(new Date()) + " 00:00:00";
                    this.screenData.endDate = this.dealDate(new Date()) + " 23:59:59";
                    break;
                case 1:
                {
                    this.title = "昨天";
                    let date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    this.screenData.startDate = this.dealDate(date) + " 00:00:00";
                    this.screenData.endDate = this.dealDate(date) + " 23:59:59";
                }

                    break;
                case 2:
                {
                    this.title = "一周内";
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    this.screenData.startDate = this.dealDate(start) + " 00:00:00";
                    this.screenData.endDate = this.dealDate(end) + " 23:59:59";
                }

                    break;
                case 3:
                {
                    this.title = "一月内";
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    this.screenData.startDate = this.dealDate(start) + " 00:00:00";
                    this.screenData.endDate = this.dealDate(end) + " 23:59:59";
                }
                    break;
                case 4:
                {
                    this.title = "近一年";
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                    this.screenData.startDate = this.dealDate(start) + " 00:00:00";
                    this.screenData.endDate = this.dealDate(end) + " 23:59:59";
                }

                    break;
                case 5:
                    this.title = "全部";
                    this.screenData.startDate = "";
                    this.screenData.endDate = "";
                    break;
            }
            this.getData();

        },
        methods:{
            moreClick:function(){
                this.isMore = !this.isMore;
            },
            screenClick:function(){
                this.pageNum = 1;
                this.getData();
            },
            //监听条数变化
            handleSizeChange(val) {

                this.pageSize = val;
                if (this.total > this.pageSize*(this.pageNum-1)){
                    this.getData();
                }

            },
            //监听页码变化
            handleCurrentChange(val) {

                this.pageNum = val
                this.getData();
            },
            getData:function(){
                let data = {
                    resume_name:this.screenData.search,
                    start_time:this.screenData.startDate,
                    end_time:this.screenData.endDate,
                    doctor_id:Number(this.screenData.docValue),
                    department_id:Number(this.screenData.departmentValue),
                    pager:{
                        number:this.pageNum,
                        size:this.pageSize,
                        order_by:'',
                    }
                }

                resumeList(data).then((res)=>{
                    if (res.code == 200){
                        this.total = res.data.total;
                        this.tableData = res.data.data;
                    }else {
                        this.$message.error(res.msg);
                    }
                }).catch((err)=>{

                })
            },
            addClick:function (id) {
              this.$router.push({
                name: "outpatient",
                query: {
                  id: id,
                  type: 1
                }
              })
            },
            patientClick:function (item) {
                console.log(this.type);
                this.$router.push({name:"patientDetails",query:{id:item.ID,type:this.type}})
            },
            dealDate:function (date) {
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + "-" + month + "-" + day
            },
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/patient/patientList.scss";
</style>
